<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8"/>
	<title>Backbone.Marionette.js Library</title>
	<link rel="stylesheet" href="css/app.css">
	<link rel="stylesheet" href="css/jquery-ui-1.9.2.css">
	<link rel="stylesheet" href="css/demos.css">
	<script type="text/javascript" src="js/lib/jquery.js"></script>
	<script type="text/javascript" src="js/lib/underscore.js"></script>
	<script type="text/javascript" src="js/lib/backbone.js"></script>
	<script type="text/javascript" src="js/lib/backbone.marionette.js"></script>

</head>
<body>
	<div>
		<a href="#show">SHOW</a>
	</div>
	<div id="container">
	</div>
	<div id="grid">
	</div>

	<script type="text/html" id="sample-template">
   	<p>This is an ItemView<p>
    	<%= value1 %> </br>
    	<%= value2 %> </br>
	</script>

	<script id="grid-template" type="text/template">
	<thead>        
			<tr>
				<th>Username</th>
				<th>Full Name</th>
        </tr>
    </thead>
    <tbody></tbody>
	</script>

	<script id="row-template" type="text/template">
        <td>
            <%= value1 %>
        </td>
        <td>
            <%= value2 %>
        </td>
	</script>
        
	<script>

	var userData = [
		{
			value1: "dbailey",
			value2: "Derick Bailey"
		},
		{
			value1: "jbob",
			value2: "Joe Bob"
		},
		{
			value1: "fbar",
			value2: "Foo Bar"
		}
	];

	var SampleModel = Backbone.Model.extend({
		defaults : {
			value1 : "A random Value",
			value2 : "Another Random Value"
		}
	});

	var SampleCollection = Backbone.Collection.extend({
		model: SampleModel
	});

	var SampleView = Marionette.ItemView.extend({
		template : '#sample-template' //,

		/*
		initialize: function() {
			console.log("Marionette.ItemView: initialize enter");
		},

		render: function() {
			console.log("Marionette.ItemView: render enter");
		}
		*/
	});

	// A Grid Row
	var GridRow = Backbone.Marionette.ItemView.extend({
		template: "#row-template",
		tagName: "tr"
	});

	// The grid view
	var GridView = Backbone.Marionette.CompositeView.extend({
//		tagName: "table",
		template: "#grid-template",
//		itemView: GridRow,
		childView: GridRow,
		childViewContainer: 'tbody',
    
		/*
		attachHtml: function(collectionView, itemView) {
			debugger;
			collectionView.$("tbody").append(itemView.el);
		}
		*/
		onRender: function(){
    		// do stuff here
			console.log("ComponiteView: onRender event caught");
  		}
	});

	var myRegion = new Marionette.Region({
		el: '#container'
	});

	var App = new Marionette.Application();

	App.addInitializer(function () {
//		var controller = new AppController();
//		var router = new AppRouter({controller:controller});
//		controller.start();
		console.log("App: addInitializer requested.");
		debugger;
		var sampleModel = new SampleModel();
		var sampleView = new SampleView({model:sampleModel}); // this style requires region definition ...
		App.main.show(sampleView);

		var list = new SampleCollection(userData);
		var gridView = new GridView({ collection: list });
		App.table.show(gridView);
		// gridView.render();
		// console.log(gridView.el);
		// $("#grid").html(gridView.el);
	});
	
	App.addRegions( {
		main: myRegion,
		table: '#grid'
	});

	App.on('initialize:after', function () {
		console.log("App: handler for onInitialize called (initialize:after). -- enter");
		if (Backbone.history) {
			Backbone.history.start();
			console.log("App: handler for onInitialize - initializing History");
		}
		console.log("App: handler for onInitialize called (initialize:after). -- leave");
	});

//	var sampleModel = new SampleModel();
//	var sampleView = new SampleView({model:sampleModel, el : '#container'}); // this is required when no regio is used ...
//	sampleView.render();

//	var sampleView = new SampleView({model:sampleModel}); // this style requires region definition ...
//	myRegion.show(sampleView);

	App.start();

	</script>

</body>
</html>
